<template>
  <div class="plainhouse-content">
    <back-bar title="民住" @toBack="toBack" />
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="空空如也吧~"
      slot="houseItem"
      v-if="plainCollectionList.length == 0"
    />
    <house-item
      @todetail="todetail(item.id)"
      slot="houseItem"
      v-for="item of plainCollectionList"
      :houseItem="item"
      :key="item.id"
      :imgPath="staticpath+item.images[0].path"
    >
      <span slot="cancelcollect" id="cancel-box" @click.stop="cancleCollect(item.id)">
        <van-icon name="cross" />
      </span>
    </house-item>
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import { cancelCollection } from "network/housedetail";
import HouseItem from "components/common/houseitem/HouseItem";

import { allCollection } from "network/collectionHouse";

import { mapState } from "vuex";

export default {
  name: "plainhousecollect",
  components: {
    BackBar,
    HouseItem,
  },
  data() {
    return {
      plainCollectionList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    todetail(houseId) {
      this.$router.push({
        path: "/housedetail",
        query: {
          houseId,
        },
      });
    },
    cancleCollect(houseId) {
      let userId = this.userId;
      cancelCollection({ houseId, userId }).then((res) => {
        if (res.code == 200) {
          this.$toast({
            message: "取消收藏成功",
            position: "bottom",
          });
          let code = 3;
          allCollection({ userId, code }).then((res) => {
            this.plainCollectionList = res.data;
          });
        } else {
          this.$taost({
            message: "取消收藏失败",
            position: "bottom",
          });
        }
      });
    },
  },
  created() {
    let userId = this.userId;
    console.log(userId);
    let code = 3;
    allCollection({ userId, code }).then((res) => {
      if(res.code == 200){
        this.plainCollectionList = res.data;
      }
    });
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.plainhouse-content {
  padding-top: 50px;
  margin-bottom: 60px;
}
#cancel-box {
  background-color: #fff;
  color: #ccc;
}
#cancel-box {
  display: inline-block;
  height: 20px;
  width: 20px;
}
#cancel-box .van-icon-cross {
  font-size: 15px !important;
}
</style>